<script setup lang="ts">
import { onMounted, ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { usePublicHooks } from "@/views/system/hooks";
// import { Codemirror } from "vue-codemirror";
const { switchStyle } = usePublicHooks();
// import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import type { UploadProps } from "element-plus";
import { getToken } from "@/utils/auth";
import getURL from "@/utils/http/address";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    aiName: "",
    aiHead: "",
    aiSysMessage: "",
    aiFirstUserMsg: "",
    apiKey: "",
    gmlURL: "",
    cogVieURL: "",
    webMode: "",
    knoMode: "",
    dataMode: "",
    drawMode: "",
    textModel: "",
    isFalg: 0,
    addUser: "1",
    addTime: "2024-8-9"
  })
});
usePublicHooks();
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);
const headers = ref();
const uploadAddress = ref();
function getRef() {
  return ruleFormRef.value;
}

const imageUrl = ref("");

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  console.log("uploadFile", uploadFile);
  console.log("response", response);
  imageUrl.value = URL.createObjectURL(uploadFile.raw!);
  newFormInline.value.aiHead = "/wwwroot/aihead/" + response.result;
};

const beforeAvatarUpload: UploadProps["beforeUpload"] = rawFile => {
  if (rawFile)
    // if (rawFile.type !== "image/jpeg") {
    //   ElMessage.error("Avatar picture must be JPG format!");
    //   return false;
    // } else if (rawFile.size / 1024 / 1024 > 2) {
    //   ElMessage.error("Avatar picture size can not exceed 2MB!");
    //   return false;
    // }
    return true;
};
onMounted(() => {
  headers.value = { Authorization: "Bearer " + getToken().accessToken };
  uploadAddress.value = getURL + "/api/System/uploadAIHeade";
  if (newFormInline.value.aiHead) {
    imageUrl.value = getURL + newFormInline.value.aiHead;
  }
});
defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    label-position="top"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-form-item label="AI名称" prop="aiName">
      <el-input
        v-model="newFormInline.aiName"
        clearable
        placeholder="请输入AI的名字"
      />
    </el-form-item>
    <el-form-item label="AI头像" prop="aiHead">
      <el-upload
        class="avatar-uploader"
        style="width: 100px"
        :action="uploadAddress"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :headers="headers"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
          <Plus />
        </el-icon>
      </el-upload>
      <el-input
        v-model="newFormInline.aiHead"
        clearable
        placeholder="输入AI头像"
        v-show="false"
      />
    </el-form-item>
    <el-form-item label="系统预置消息" prop="aiSysMessage">
      <el-input
        v-model="newFormInline.aiSysMessage"
        clearable
        type="textarea"
        :rows="3"
      />
    </el-form-item>
    <el-form-item label="AI开场语" prop="aiFirstUserMsg">
      <el-input
        v-model="newFormInline.aiFirstUserMsg"
        type="textarea"
        :rows="3"
        clearable
      />
    </el-form-item>
    <el-form-item label="APIKey" prop="APIKey">
      <el-input v-model="newFormInline.apiKey" clearable type="text" />
    </el-form-item>
    <el-form-item label="通用模型URL" prop="gmlURL">
      <el-input v-model="newFormInline.gmlURL" clearable type="text" />
    </el-form-item>
    <el-form-item label="绘图模型URL" prop="cogVieURL">
      <el-input v-model="newFormInline.cogVieURL" clearable type="text" />
    </el-form-item>
    <el-form-item label="网络达人系统提示语" prop="webMode">
      <el-input
        v-model="newFormInline.webMode"
        clearable
        type="textarea"
        :rows="3"
      />
    </el-form-item>
    <el-form-item label="智多星系统提示语" prop="KnoMode">
      <el-input
        v-model="newFormInline.knoMode"
        clearable
        type="textarea"
        :rows="3"
      />
    </el-form-item>
    <el-form-item label="数据分析模式提示语" prop="dataMode">
      <el-input
        v-model="newFormInline.dataMode"
        clearable
        type="textarea"
        :rows="3"
      />
    </el-form-item>
    <el-form-item label="绘图模式提示语" prop="drawMode">
      <el-input
        v-model="newFormInline.drawMode"
        clearable
        type="textarea"
        :rows="3"
      />
    </el-form-item>
    <el-form-item label="文本专家模式提示语" prop="textModel">
      <el-input
        v-model="newFormInline.textModel"
        clearable
        type="textarea"
        :rows="3"
      />
    </el-form-item>
    <el-form-item label="是否启用" prop="isFalg">
      <el-switch
        v-model="newFormInline.isFalg"
        inline-prompt
        :active-value="1"
        :inactive-value="0"
        active-text="启用"
        inactive-text="停用"
        :style="switchStyle"
      />
    </el-form-item>
  </el-form>
</template>
<style>
.box {
  width: 100%;
  height: 300px;
  border: 1px solid rgb(185 182 182);
}

.code {
  width: 300px;
  height: 100%;
  font-size: 18px;
}
</style>
